<template>
	<u-skeleton rows="10" title :loading="false">
		<view class="content">
			<view class="backgroud" style="background-color: #F4F5F7;">
				<!-- 导航栏 -->
				<view>
					<uni-nav-bar title="" :border="false" :fixed="true" background-color="#F4F5F7">
					</uni-nav-bar>
				</view>
				<!-- 轮播图 -->
				<view class="banner" style="">
					<u-swiper :list="list3" previousMargin="30" nextMargin="30" circular :autoplay="true" radius="5"
						bgColor="transparent" height="160"></u-swiper>
				</view>
				<!-- 内容 -->
				<view style="margin-top: 10px; background-color: #FCFDFE;transform: scale(0.93);border-radius: 10px;" @click="edit">
					<!-- 头像 -->
					<view style="display: flex; justify-content: space-around; 
				position: relative;transform: scale(0.95);">
						<up-avatar :src="avatar[0]" size="50" style="margin-top: 10px;"></up-avatar>
						<up-avatar :src="avatar[1]" size="50" style="margin-top: 10px;"></up-avatar>
						<view style="position: absolute; top: 50%; margin-top: 10px; left: 50%; transform: translate(-50%, -50%);">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="60" height="60"
								class="heart-svg">
								<path fill="red"
									d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
							</svg>
						</view>
					</view>
					<!-- 计时器 -->
					<view style="display: flex;justify-content: center;align-items: center; margin-top: 5px;transform: scale(0.95);border-radius: 10px;
						">
						<view style="color: black; font-size: 16px; ">
							<text>在一起已经：</text>
							<text>{{ timeTogether }}</text>
						</view>
					</view>
					<u-popup :safeAreaInsetTop="true" :show="LoveShow" mode="center" @close="close" 
						:closeable="true">
						<view
							style="height: 700rpx;width: 600rpx;background-color: ;display: flex; align-items: center;justify-content: center;">
							<view>
								<view style="margin-bottom: 40px;"><text>已连续签到{{signDay}}天</text></view>
								<up-button type="primary" shape="circle" :text="btnTitle" :disabled="btnDis"
									@click="signBtn"></up-button>
							</view>
							<!-- <text>爱你破碎 胜过完美</text> -->
						</view>
					</u-popup>
				</view>
				<!-- 我的金币 -->
				<view style="display: flex; justify-content: space-evenly; height: 80px; margin-top: 10px;">
					<view @click="myMoney"
						style="display: flex; justify-content: space-between; align-items: center; background-color: #FCFDFE; width: 70%; border-radius: 10px;">
						<text style="margin-left: 20px;">我的呜噜币</text>
						<text
							style="margin-right: 20px; color: red; font-size: 20px; font-weight: 800;">{{bonus}}</text>
					</view>
					<view @click="openPopup"
						style="background: linear-gradient(to bottom, #FC8D55, #FD5C52); display: flex; justify-content: center;  flex-direction: column;align-items: center; width: 20%; border-radius: 10px;">
						<u-icon name="calendar" size="30" style="margin-top: 15px;"></u-icon>
						<text style="color: #FFFFFF;font-size: 11px; margin-top: 0px;">签到</text>
						<u-popup :safeAreaInsetTop="true" :round="10" :show="popupShow" mode="center" @close="close" @open="open"
							:closeable="true">
							<view
								style="height: 700rpx;width: 600rpx;background-color: ;display: flex; align-items: center;justify-content: center;">
								<view>
									<view style="margin-bottom: 40px;"><text>已连续签到{{signDay}}天</text></view>
									<up-button type="primary" shape="circle" :text="btnTitle" :disabled="btnDis"
										@click="signBtn"></up-button>
								</view>
								<!-- <text>爱你破碎 胜过完美</text> -->
							</view>
						</u-popup>
					</view>
				</view>
				<view style="display: flex;justify-content: space-evenly;height: 80px;margin-top: 10px;">
					<view @click="Pending"
						style="display: flex;justify-content: space-between;align-items: center; background-color: #FE4D53;width: 45%;border-radius: 10px;">
						<!-- <view style="display: flex;justify-content: space-between;"> -->
						<text style="margin-left: 15px; color: aliceblue;">待处理<br>
							<text style="font-size: 10px; color: #FAB9B8;">今天处理任务了嘛</text></text>
						<text
							style="margin-right: 15px; color: aliceblue; font-size: 20px;margin-top: -20px; font-weight: 800;">{{verifyCount}}</text>
						<!-- </view> -->
					</view>
					<view @click="taskList"
						style="display: flex; justify-content: space-between;align-items: center; background-color: #FF9D54;width: 45%;border-radius: 10px;">
						<text style="margin-left: 15px; color: aliceblue;">我的任务<br><text
								style="font-size: 10px; color: #FAB9B8;">公主加把劲</text></text>
						<text
							style="margin-right: 15px; color: aliceblue; font-size: 20px;margin-top: -20px;font-weight: 800;">{{taskCount}}</text>
					</view>
				</view>
				<!-- 金刚区 -->
				<!-- 金刚区 -->
				<view style="width: 90%;; margin: 10px auto;">
					<view style="background-color: #FCFDFE;
					 align-items: center;
					 border-radius: 10px;height: 180px;">
						<u-grid :border="false" @click="gridClick" col="3"
							style="display: flex;justify-content: space-around;">
							<u-grid-item v-for="(baseListItem, baseListIndex) in baseList" :key="baseListIndex"
								style="width: 30%;margin-top: 10px;">
								<up-image :show-loading="true" :src="baseListItem.name" width="55px"
									height="55px"></up-image>
								<text class="grid-text"
									style="color: black; font-size: 16px;">{{baseListItem.title}}</text>
							</u-grid-item>
						</u-grid>
						<u-toast ref="uToast" />
					</view>
				</view>
				<view style="display: flex; justify-content: space-around;; margin-top: 10px;">
					<view
						style="display: flex; justify-content: space-between; align-items: center; background-color: ; width:90%; border-radius: 10px;">
						<text style="margin-left: 0px;">推荐任务</text>
						<text style="margin-right: 0px; color: red; font-size: 11px; font-weight: ;">更多</text>
					</view>
				</view>
				<view style="display: flex; justify-content:space-evenly;; margin-top: 10px;">
					<view
						style="width: 45%; border-radius: 10px;height: 140px;overflow: hidden;background-color: #FCFDFE;">
						<view style="width: 100%; background-color: #FCFDFE; position: relative;">
							<up-image :show-loading="true" src="http://qiniu.gaowa.love/65dd7498426da1709012120.jpg"
								width="100%" height="90" mode="aspectFill" @click="click"></up-image>
						</view>
						<view
							style="height: 30%; width: 100%; background-color:#FCFDFE ;display: flex;justify-content: space-between;align-items: center;font-size: 11px;">
							<text style="margin-left: 10px;ba">叠被子</text>
							<text style="margin-right: 10px;color: red; font-size:18px;font-weight: 700;">100 <text
									style="font-size: 11px;font-weight: ;">金币</text></text>
						</view>
					</view>
					<!-- 第二个 -->
					<view
						style="width: 45%; border-radius: 10px;height: 140px;overflow: hidden;background-color: #FCFDFE;">
						<view style="width: 100%; background-color: #FCFDFE; position: relative;overflow: hidden;">
							<up-image :show-loading="true" src="http://qiniu.gaowa.love/65dd7498426da1709012120.jpg"
								width="100%" height="90" mode="aspectFill" @click="click"></up-image>
						</view>
						<view
							style="height: 30%; width: 100%;background-color: #FCFDFE; display: flex;justify-content: space-between;align-items: center;font-size: 11px;">
							<text style="margin-left: 10px;">新人指导</text>
							<text style="margin-right: 10px;color: red; font-size:18px;font-weight: 700;">100 <text
									style="font-size: 11px;font-weight: ;">金币</text></text>
						</view>
					</view>
				</view>
				<view style="display: flex; justify-content: space-evenly; margin-top: 10px;">
					<!-- 第三个 -->
					<view
						style="width: 45%; border-radius: 10px;background-color: #FCFDFE;height: 140px;overflow: hidden;">
						<view style="width: 100%;  position: relative;">
							<up-image :show-loading="true" src="http://qiniu.gaowa.love/65dd7498426da1709012120.jpg"
								width="100%" height="90" mode="aspectFill" @click="click"></up-image>
						</view>
						<view
							style="height: 30%; width: 100%;  display: flex;background-color: #FCFDFE;justify-content: space-between;align-items: center;font-size: 11px;">
							<text style="margin-left: 10px;">新人指导</text>
							<text style="margin-right: 10px;color: red; font-size:18px;font-weight: 700;">100 <text
									style="font-size: 11px;font-weight: ;">金币</text></text>
						</view>
					</view>
					<!-- 第四个 -->
					<view
						style="width: 45%; border-radius: 10px;height: 140px;background-color: #FCFDFE;overflow: hidden;">
						<view style="width: 100%; background-color: #FCFDFE;position: relative;">
							<up-image :show-loading="true" src="http://qiniu.gaowa.love/65dd7498426da1709012120.jpg"
								width="100%" height="90" mode="aspectFill" @click="click"></up-image>
						</view>
						<view
							style="height: 30%; width: 100%; display: flex;background-color: #FCFDFE;justify-content: space-between;align-items: center;font-size: 11px;">
							<text style="margin-left: 10px;">新人指导</text>
							<text style="margin-right: 10px;color: red; font-size:18px;font-weight: 700;">100 <text
									style="font-size: 11px;font-weight: ;">金币</text></text>
						</view>
					</view>
				</view>
				<view class="card-stack">
					<view class="card" style="background-color: #FFD700;"><up-image :show-loading="true"
							src="http://qiniu.gaowa.love/65dd7498426da1709012120.jpg" width="100%" height="200"
							mode="aspectFill" @click="click"></up-image></view>
					<view class="card" style="background-color: #FF6347;"><up-image :show-loading="true"
							src="http://qiniu.gaowa.love/65dda430889ff1709024304.jpg" width="100%" height="200"
							mode="aspectFill" @click="click"></up-image></view>
				</view>
				<u-tabbar :value="value2" :placeholder="true" @change="name => value2 = name" :fixed="true"
					:safeAreaInsetBottom="true">
					<u-tabbar-item text="首页" icon="home" @click="click1"></u-tabbar-item>
					<u-tabbar-item text="任务" icon="photo" @click="click1" badge=""></u-tabbar-item>
					<u-tabbar-item text="兑换" icon="play-right" @click="click1"></u-tabbar-item>
					<u-tabbar-item text="我的" icon="account" @click="click1"></u-tabbar-item>
				</u-tabbar>
			</view>
		</view>
	</u-skeleton>
</template>
<script>
	import {
		getMoney
	} from "../../request/API/getMoney.js";
	import {
		getTaskCount
	} from "../../request/API/getTaskCount.js";
	import {
		getVerifyCount
	} from "../../request/API/getVerifyCount.js";
	import {
		getSign
	} from "../../request/API/getSign.js";
	import {
		sign
	} from "../../request/API/sign.js";
	export default {
		data() {
			return {
				value2: 0,
				bonus: 0.00,
				btnDis: true,
				btnTitle: "立即签到",
				taskCount: 0,
				signDay: 0,
				popupShow: false,
				verifyCount: 0,
				avatar: [
					'http://qiniu.gaowa.love/65d5ae3a340641708502586.jpg',
					'http://qiniu.gaowa.love/65d5ae6a62f161708502634.jpg'
				],
				baseList: [{
						name: 'http://qiniu.gaowa.love/65d5a8897f7a41708501129.png',
						title: '家务'
					},
					{
						name: 'http://qiniu.gaowa.love/65d5a776cc0551708500854.png',
						title: '吃饭'
					},
					{
						name: 'http://qiniu.gaowa.love/65d5a78b04aab1708500875.png',
						title: '运动'
					}, {
						name: 'http://qiniu.gaowa.love/65d5a79934e1b1708500889.png',
						title: '图片'
					},
					{
						name: 'http://qiniu.gaowa.love/65d5a7a63b38b1708500902.png',
						title: '锁头'
					},
					{
						name: 'http://qiniu.gaowa.love/65d5a7b2b1c171708500914.png',
						title: '星星'
					},
				],
				list3: [
					'http://qiniu.hhwyxs.cn/65d30dd9c587c1708330457.jpg',
					'http://qiniu.hhwyxs.cn/65d30db69cb721708330422.jpg',
					'http://qiniu.hhwyxs.cn/65d30da0459641708330400.jpg',
				],
				startDate: new Date('2021-10-01'), // 设置开始日期
				timeTogether: '0 天 0 小时 0 分钟 0 秒'
			}
		},
		mounted() {
			this.updateTimeTogether(); // 初始化时间显示
			setInterval(() => {
				this.updateTimeTogether(); // 每秒更新时间显示
			}, 1000);
		},
		onLoad() {
			const token = uni.getStorageSync('token');
			// this.bonus = token['userInfo']['bonus']
		},
		onShow() {
			getMoney()
				.then(data => {
					this.bonus = data.data.bonus
				})
				.catch(Error => {

				})
			getTaskCount()
				.then(data => {
					this.taskCount = data.data
					// console.log(this.taskCount)
				})
				.catch(Error => {

				})
			getVerifyCount()
				.then(data => {
					this.verifyCount = data.data
				})
				.catch(Error => {

				})
		},
		methods: {
			updateTimeTogether() {
				const now = new Date();
				const timeDiff = now.getTime() - this.startDate.getTime();
				const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
				const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
				const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

				this.timeTogether = `${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`;
			},
			// 我的金币
			myMoney() {
				const token = uni.getStorageSync('token');
				// console.log(!token.token)
				if (!token.token) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/moneyLog?money=' + this.bonus,
						animationType: 'slide-in-bottom',
						animationDuration: 300
					});
				}

			},
			openPopup() {
				const token = uni.getStorageSync('token');
				// console.log(!token.token)
				if (!token.token) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return
				}
				getSign()
					.then(data => {
						console.log(data.data['signday'])
						this.signDay = data.data['signday']
						this.btnDis = false
						this.btnTitle = "立即签到"
					})
					.catch(Error => {
						console.log(Error.data['signday'])
						this.signDay = Error.data['signday']
						this.btnDis = true
						this.btnTitle = "今日已签到"
					})
				this.popupShow = true
			},
			signBtn() {
				sign()
					.then(data => {
						console.log(data.data)
						uni.showToast({
							title: data.msg,
							icon: 'none',
						});
						this.btnDis = true
						this.signDay = data.data['signday'] + 1
						// console.log(Number(this.bonus) + 5.00)
						this.bonus = Number(this.bonus) + 5.00
						this.btnTitle = "今日已签到"
						// this.btnDis = false
					})
					.catch(Error => {
						uni.showToast({
							title: Error.msg,
							icon: 'none',
						});
						// this.btnDis = true
					})
			},
			close() {
				this.popupShow = false
			},
			edit(){
				uni.navigateTo({
					url:'/pages/index/editLove'
				})
			},
			// 待处理
			Pending() {
				const token = uni.getStorageSync('token');
				// console.log(!token.token)
				if (!token.token) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				} else {
					uni.navigateTo({
						url: '/pages/task/pending'
					})
				}

			},
			taskList() {
				const token = uni.getStorageSync('token');
				// console.log(!token.token)
				if (!token.token) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				} else {
					uni.navigateTo({
						url: '/pages/task/task'
					})
				}
			},
			click1: function(e) {
				const token = uni.getStorageSync('token');
				// console.log(!token.token)
				if (!token.token) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				} else if (e == 1) {
					uni.redirectTo({
						url: "/pages/index/housework"
					})
				} else if (e == 2) {
					uni.redirectTo({
						url: "/pages/cash/cash"
					})
				}
				if (e == 3) {
					uni.redirectTo({
						url: "/pages/home/home"
					})
				}
			},
			gridClick(e) {
				console.log(e)
				if (e == 0) {
					uni.navigateTo({
						url: "/pages/index/housework"
					})
				}
			}
		},
		beforeDestroy() {
			// 在组件销毁前清除定时器
			clearInterval(this.intervalId);
		}
	}
</script>

<style>
	.card-stack {
		position: relative;
		margin-top: 20px;
		margin-bottom: 40px;
		width: 90%;
		max-width: 600px;
		/* 设置最大宽度，可以根据需要调整 */
		height: 200px;
		margin-left: auto;
		margin-right: auto;
	}

	.card {
		width: 100%;
		height: 200px;
		border-radius: 10px;
		background-color: #FFF;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		position: absolute;
		bottom: 0;
		opacity: 0;
	}

	.card:nth-child(1) {
		animation: stackAnimation 2s 0s infinite;
	}

	.card:nth-child(2) {
		animation: stackAnimation 2s 1s infinite;
	}

	@keyframes stackAnimation {
		0% {
			transform: translateY(100%);
			opacity: 0;
		}

		20% {
			transform: translateY(0);
			opacity: 1;
		}

		40% {
			transform: translateY(0);
			opacity: 1;
		}

		60% {
			transform: translateX(-100%);
			opacity: 0;
		}
	}

	.content {
		/* height: 100vh; */
		background-color: #FAF9F9;
	}

	.banner {
		/* height: 160px; */
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.12);
		}

		100% {
			transform: scale(1);
		}
	}

	.heart-svg {
		animation: pulse 2s ease-in-out infinite;
	}
</style>